var load;
var contextPath = $("#contextPath").val();
var is=true;
$(function (){
	// 上传头像
   var el = document.querySelector('.upload_headportrait'),
     box = el.querySelector('.headportrait_box'),
     inputs = document.querySelector('#upload'),
     btn = document.querySelector('.btn_save'),
     wclient = document.documentElement.clientWidth,
     hclient = document.documentElement.clientHeight,
     vanilla;
   inputs.addEventListener('change', function() {
     var file = this.files[0];
     reduce(file);
   }, false);
   // 压缩
   function reduce(file){
     var reader = new FileReader()
     var imgtype = file.type
    
     reader.onload = function() {
       var url = reader.result
       var image = new Image()
       image.onload = function() {
         var canvas = document.createElement('canvas')
         var context = canvas.getContext('2d')
         var w  = image.width
         var h  = image.height
         if(w>wclient*2){
           w = wclient*2
           h = (image.height/image.width)*w
         }else{
           if(h>hclient*2){
        	   h = hclient*2
               w = (image.width/image.height)*h
           }
         }
         canvas.width = w
         canvas.height = h
         context.fillStyle = "#000"
         context.fillRect(0, 0, w, h)
         context.drawImage(image, 0, 0, image.width,image.height,0, 0, w, h)
         var newSrc = canvas.toDataURL(imgtype, .5)
         readerImg(newSrc)
       }
       image.src = url

     }
     reader.readAsDataURL(file);
   }
   // 读取文件
   function readerImg(url) {
      vanilla.bind({
         url: url,
         orientation: 1
       });
       el.style.display = "flex";
       btn.addEventListener('click', function() {
         vanilla.result({
           format: 'png'
         }).then(function(base64Image) {

            upload(base64Image);
           // 上传完成后关闭
           el.style.display = "none";
         });
       }, false);
   }
   
   
   vanilla = new Croppie(box, {
     viewport: {
       width: 200,
       height: 200,
       type: 'circle'
     },
     boundary: {
       width: wclient,
       height: hclient
     },
     showZoomer: false,
     enableOrientation: true
   });
});
//头像
function upload(base64Image){
	if(is){
		is = false;
	$.ajax({
		url:"uploadImg",
		type:"post",
		data:{"base64Image":base64Image},
		success:function(data){
			is = true
			layer.close(load);
			var state = data.result.state;	
			layer.open({
			    content: data.result.message,
			    style: 'background-color:rgba(0,0,0,.8); color:#fff; border:none;',
			    time: 1,
			    shade: false 
			});	
			if(state == '1'){
				$("#base64Image").attr("src",data.imageAddress.message);
			}
		},
		error : function(XMLHttpRequest, textStatus, errorThrown){
			is = true
			layer.close(load);
			layer.open({
			    content: '保存失败',
			    style: 'background-color:rgba(0,0,0,.8); color:#fff; border:none;',
			    time: 1,
			    shade: false 
			});	
		}
	});
	}
}

//性别
function upSex(){
	var sex= $("#sex").val();
	if(sex == 2){
		layer.open({
		    content:'请选择性别!',
		    time: 2
		});
		return false;
	}
	$.ajax({
		url:"upSex",
		type:"post",
		data:{"sex":sex},
		success:function(data){
			layer.open({
			    content: data.result.message,
			    style: 'background-color:rgba(0,0,0,.8); color:#fff; border:none;',
			    time: 1,
			    shade: false 
			});	
		}
	});
}

$(function(){
	var btnSex = document.querySelector('.selectSex')
	var sex = document.querySelector('#sex')
	btnSex.addEventListener('click', function () {
	  var manSex = sex.value=='1'? 'simulation_checkbox_active':''
	  var woManSex = sex.value=='0'? 'simulation_checkbox_active':''
	  var self = this;
	  layer.open({
	    content: '<div class="mod_select_sex dt f0">' +
	      '<div class="mod_select_sex_item dib vm"><a class="simulation_checkbox dib vm '+manSex+'" href="javascript:;"></a><span class="dib vm">男</span></div>' +
	      '<div class="mod_select_sex_item dib vm"><a class="simulation_checkbox dib vm '+woManSex+'" href="javascript:;"></a><span class="dib vm">女</span></div></div>',
	    btn: ['确认', '取消'],
	    yes: function (index) {
	      var ele = document.querySelector('.mod_select_sex').querySelector('.simulation_checkbox_active')
	      var val = ele.nextSibling.innerHTML.trim()
	      self.innerHTML = val
	      if(val == '女'){
	    	  sex.value = '0'
	      }else if(val == '男'){
	    	  sex.value = '1'
	      }else{
	    	  sex.value = '2'
	      }
	      upSex()
	      layer.close(index);
	    },
	    success: function () {
	      var item = document.querySelectorAll('.mod_select_sex_item')
	      form.Radio(item);
	    }
	  });
	}, false)

})
